<template>
  <div>
    <div class="main-row">
      <div class="main-box">
        <div class="main-nav">
          <div class="main-title">
            <div
              class="main-t"
              style="font-weight: bold; font-size: 0.27rem; color: #e59319"
            >
              区域统计
            </div>
          </div>
          <div class="screen-row" :style="{ width: screenshow ? '' : '7.4rem' }">
            <div class="screen-btn" @click="screenshow = !screenshow">
              <i
                :class="screenshow ? 'el-icon-search' : 'el-icon-d-arrow-right'"
              ></i>
            </div>

            <div style="display: inline-block; padding-left: 0.1rem">
              <span> 筛选 </span>
              <el-select
                style="width: 1.2rem"
                v-model="type"
                :class="'sorttype' + type"
                placeholder="请选择"
                @change="sorttypechange($event)"
              >
                <el-option label="用电量" :value="1"></el-option>
                <!-- <el-option label="温度" :value="2"></el-option>
                <el-option label="使用时长" :value="3"></el-option> -->
                <el-option label="功率" :value="4"> </el-option>
              </el-select>
            </div>
            <div style="display: inline-block; padding-left: 10px">
              <span> 排序 </span>
              <el-select
                style="width: 140px"
                v-model="currentsotr"
                :class="'currentsotr' + currentsotr"
                placeholder="请选择"
                @change="chargedata_sort($event)"
              >
                <el-option label="按序号" value="default"></el-option>
                <el-option label="从小到大" value="desc"></el-option>
                <el-option label="从大到小" value="asc"></el-option>
              </el-select>
            </div>
            <!-- <el-button
              type="primary"
              class="nav-btn"
              style="margin-left: 10px"
              @click="Chargingpointinformation(1, $event)"
              >历史记录</el-button
            > -->
         
          </div>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 6.4rem">
          <div class="main-center" ref="maincenter">
            <div
              v-for="item in chargedata"
              :key="item.probeId"
              class="charge-box"
              v-show="statetab == (item.openDeviceNum==0?0:1)|| statetab == 3"
           
            >
              <div
                class="charge-mainbox"
                :style="{ background: colorcacl2(item) }"
                
              >
                <div
                  class="chargeing-infos"
                  style="
                    display: flex;
                    padding-top: 5px;
                    justify-content: space-between;
                  "
                >
                  <div style="flex:3" class="charge-title">
                    <i>
                      <svg
                        t="1649649380777"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="55553"
                        width="30"
                        height="30"
                      >
                        <path
                          d="M750.09 51.86l-38.65 100.65A382.3 382.3 0 0 1 868.28 344a378 378 0 0 1 23.54 131.61c0 201.33-157.49 366.5-355.73 379L467.68 959.7c14.61 1.33 29.38 2.11 44.33 2.11 268.11 0 486.23-218.12 486.23-486.23 0-181.65-100.24-340.25-248.15-423.72zM154.48 603.74a379.87 379.87 0 0 1-22.31-128.16c0-121.77 57.67-230.27 147.06-299.82l57.41-153.57C155 92.7 25.76 269.28 25.76 475.58c0 200.3 121.77 372.67 295.15 447.06l33.8-101.48a381.79 381.79 0 0 1-200.23-217.42z"
                          p-id="55554"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M796.49 352.48l-219.11 7.11 70.29-183.06 35.68-92.92L715.45 0H438.86l-22.51 60.2-44.12 118-144.72 387.17 289.57-14.22-98.74 296.46-31.49 94.53L359.6 1024l49.51-76.1L468 857.4z m-245.6 177.3l-282.08 9.48L458.45 22.52h27.26L299.64 522.67 584.08 512 441.85 841.48z"
                          p-id="55555"
                          fill="#ffffff"
                        ></path>
                      </svg>
                    </i>
                      
                    <span class="charge-value">
                      {{ item.openDeviceNum + `/` + item.deviceNum }}</span
                    >
                  </div>
                                 <el-tooltip class="item" effect="dark" content="点击固定弹窗信息" placement="top">
                   
                  <div style="flex:4" class="charge-title"
                    @mouseenter="chargemouseenter($event,1,item)"
                @mouseleave="ChargingPointinfoshow = false"
                 @click.stop="chargeclick($event,1,item)">
                    <i
                      ><svg
                        t="1646967302059"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="44759"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M512 2.27555555C230.48760889 2.27555555 2.27555555 230.48760889 2.27555555 512c0 281.51352889 228.21205333 509.72444445 509.72444445 509.72444445 281.51352889 0 509.72444445-228.21091555 509.72444445-509.72444445 0-281.51239111-228.21091555-509.72444445-509.72444445-509.72444445z m213.38112 468.24675556L468.35029333 795.63889778c-2.67832889 2.38592-5.80152889 3.58286222-9.37187555 3.58286222-1.78176 0-3.1232-0.42211555-4.01635556-1.19808-6.2464-1.61564445-8.47644445-4.77866667-6.69468444-9.56188445l41.50499555-218.73322666H309.04433778c-4.46008889 0-7.58670222-1.59744-9.37301333-4.78208-2.67491555-3.16302222-2.23004445-6.74702222 1.34144-10.75768889l278.44721777-325.11886222c3.57262222-4.78321778 7.58442667-5.55235555 12.04906667-2.39274667 4.46008889 0.79758222 6.69468445 4.00839111 6.69468444 9.56302222l-41.50499555 218.74005334h159.30936889c4.46122667 0 7.58328889 1.61564445 9.37301333 4.77866666 0.88860445 3.18805333 0.88860445 6.77319111 0 10.76337778z"
                          p-id="44760"
                          fill="#ffffff"
                        ></path></svg
                    ></i>
        <span class="charge-value">{{
                      (item.kWh / 1000).toFixed(2) + "度"
                    }}</span>
                 
                  </div>     </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="点击固定弹窗信息" placement="top">
                  <div style="flex:4" class="charge-title"
                    @mouseenter="chargemouseenter($event,2,item)"
                    @mouseleave="ChargingPointinfoshow = false"
                    @click.stop="chargeclick($event,2,item)">
                    <i
                      ><svg
                        t="1623286665079"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="20215"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M511.10538334 10.90284029c-276.5483767 0-500.76167846 224.21330176-500.76167847 500.76167846 0 138.55375606 56.36084992 264.02374338 147.27626854 354.71550784 90.57993737 90.24445613 215.49078928 146.04617063 353.48540993 146.04617062 138.77741021 0 264.24739754-56.36084992 354.93916199-147.49992271C956.17717438 774.34633713 1011.86706179 649.5473123 1011.86706179 511.77634584c0-276.66020377-224.21330176-500.87350553-500.76167845-500.87350555z m171.76639976 515.7465076c-40.03409579 31.64706454-96.95408112 47.75016452-169.19437685 47.75016452h-85.32406447c-4.47308334 0-8.05154999 3.57846665-8.05154999 8.05154999v205.31452472c0 22.92455206-18.67512289 41.59967494-41.59967494 41.59967494s-41.59967494-18.67512289-41.59967495-41.59967494V233.77421706c0-22.92455206 18.67512289-41.59967494 41.59967495-41.59967494h131.6204769c75.93058948 0 131.84413107 13.41924998 170.98361017 41.04053952 43.83621659 30.86427496 65.97797907 79.84453739 65.97797908 145.48703521 0.11182709 64.30057282-21.58262706 114.06362484-64.4123999 147.94723104z"
                          p-id="20216"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M626.06362484 291.92430031c-25.38474788-16.88588956-65.30701657-24.71378538-125.5818144-24.71378538h-72.01664157c-4.47308334 0-8.05154999 3.57846665-8.05155 8.05154999v216.0499247c0 4.47308334 3.57846665 8.05154999 8.05155 8.05154999h75.37145406c57.03181242 0 97.17773527-9.50530206 122.67431024-28.96321455 24.82561246-18.89877706 36.90293745-48.86843534 36.90293745-91.69820821-0.11182709-42.27063744-11.96549789-69.89192699-37.35024578-86.77781654z"
                          p-id="20217"
                          fill="#ffffff"
                        ></path></svg
                    ></i>
                   
                    <span class="charge-value">
                      {{item.powerFactor>1000? formatNumber(item.powerFactor / 1000)+'K':item.powerFactor}}W
                      </span
                    >
                   
                  </div>  </el-tooltip>
                </div>
                <div class="charge-mainbox2">
                  <div class="charge-icon">
                    <img
                      src="@/assets/images/icon13.png"
                      v-if="item.type != 0"
                      :style="item.state == 0 ? 'filter: grayscale(1);' : ''"
                    />
                    <i
                      v-if="item.type == 0"
                      :class="item.state > 0 && item.state != 2 ? 'iconon' : ''"
                    >
                      <svg
                        t="1647830167449"
                        class="icon"
                        viewBox="0 0 1034 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="97222"
                        width="57"
                        height="57"
                      >
                        <path
                          d="M1023.392156 529.817808l-229.544977-229.52758L793.84718 74.79345c0-18.419512-14.925944-33.351596-33.351596-33.351596-18.422581 0-33.352619 14.932084-33.352619 33.351596l0 158.793586L544.751938 51.211359c-13.022595-13.024641-34.140565-13.021571-47.164183 0L18.981307 529.817808c-13.024641 13.025665-13.024641 34.141588 0 47.165206 13.028735 13.022595 34.142611 13.022595 47.171346 0l83.249029-83.250052 0 398.10909c0 18.418488 14.925944 33.351596 33.351596 33.351596l676.884304 0c18.422581 0 33.351596-14.933107 33.351596-33.351596L892.989177 493.739101l83.250052 83.243913c6.509251 6.505158 15.045671 9.762341 23.579021 9.762341 8.53642 0 17.072841-3.257184 23.589254-9.770528C1036.418844 563.956326 1036.418844 542.844495 1023.392156 529.817808zM826.278823 858.497619 216.098733 858.497619 216.098733 427.03591 521.17394 121.960703l305.104883 305.083393L826.278823 858.497619 826.278823 858.497619z"
                          p-id="97223"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M474.941989 430.41896l-5.674233 0c-6.649444 0-12.032034 4.941546-12.032034 11.039427l0 46.75179 29.739325 0 0-46.75179C486.975047 435.367669 481.585293 430.41896 474.941989 430.41896z"
                          p-id="97224"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M554.678008 430.41896l-5.681396 0c-6.634094 0-12.024871 4.941546-12.024871 11.039427l0 46.75179 29.739325 0 0-46.75179C566.711066 435.367669 561.329499 430.41896 554.678008 430.41896z"
                          p-id="97225"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M511.978511 348.657818c-115.494431 0-209.446219 93.954859-209.446219 209.446219 0 55.755862 21.661346 108.228957 60.980863 147.745972 23.293519 23.404036 52.118008 41.171702 83.353406 51.368948 2.081405 0.685615 4.192485 1.006933 6.265704 1.006933 8.485255 0 16.381086-5.40408 19.171642-13.914918 3.466961-10.598382-2.323928-21.977547-12.906961-25.436322-25.199938-8.232498-48.460712-22.582321-67.278289-41.485857-31.748075-31.906687-49.233308-74.267471-49.233308-119.284757 0-93.246731 75.850525-169.101349 169.100326-169.101349 93.241614 0 169.101349 75.854619 169.101349 169.101349 0 45.183062-17.5804 87.62264-49.492204 119.550817-12.245905 11.000542-42.654472 33.111119-60.911278 33.111119-9.376555 0-16.382109-2.954285-22.078855-9.281387-14.435781-16.09149-17.603937-48.651047-17.469883-71.327512 35.011398-1.765203 62.880119-30.629601 62.880119-66.081021l0-62.777789L429.941076 501.298264l0 62.777789c0 34.750455 26.77583 63.197344 60.816111 65.979714-0.204661 27.025517 3.576455 71.327512 27.760251 98.315166 13.332656 14.877849 31.377638 22.740934 52.16508 22.740934 39.020712 0 83.447551-39.415708 88.379886-43.903929l0.645706-0.61603c39.801495-39.596833 61.715597-92.329848 61.715597-148.486846C721.423707 442.612677 627.463732 348.657818 511.978511 348.657818z"
                          p-id="97226"
                          fill="#ffffff"
                        ></path>
                      </svg>
                    </i>
                    <div>
                      <!-- <span
                        class="charge-numer"
                        v-if="item.type != 0"
                     
                        >{{ numbac2(item.number) }}
                        <i>
                        <svg t="1649321161133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3873" width="30" height="30">
                        <path  d="M882.030272 974.530557l-141.416183-141.416183a454.95573 454.95573 0 1 1 92.005007-92.005008l141.357915 141.474451a65.026972 65.026972 0 0 1-91.946739 91.94674zM142.902014 468.473882a325.134858 325.134858 0 1 0 325.134859-325.134858 325.134858 325.134858 0 0 0-325.076591 325.018322l-0.058268 0.116536z" p-id="3874" fill="#ffffff"></path>
                        </svg>
                      </i>
                      </span> -->
                      <!-- v-if="item.batteryResult && item.state > 0" -->
                      <span
                        class="charge-name"
                        :style="
                          item.userName.length < 5 ? 'font-size:19px' : ''
                        "
                        >{{ item.userName }}</span
                      >
                    </div>
                  </div>
                  <div
                    class="charge-infos charge-infos2"
                    style="margin-right: 0.07rem"
                    v-if="item.type == 0"
                  >
                    <div
                      class="charge-title"
                      :key="index.targetCategoryId"
                      v-for="index of item.targetCategoryTj.slice(0, 5)"
                    >
                      <i v-html="prodicon(index.targetCategoryId)"> </i>
                      <span class="charge-value">{{
                        index.openDeviceNum + "/" + index.deviceNum
                      }}</span>
                    </div>
                  </div>
                  <div
                    class="charge-infos charge-infos2"
                    v-if="item.type == 0 && item.targetCategoryTj.length > 5"
                  >
                    <div
                      class="charge-title"
                      :key="index.targetCategoryId"
                      v-for="index of item.targetCategoryTj.slice(5,-1)"
                    >
                      <i v-html="prodicon(index.targetCategoryId)"> </i>
                      <span class="charge-value">{{
                        index.openDeviceNum + "/" + index.deviceNum
                      }}</span>
                    </div>
                  </div>
                  <div
                    class="charge-infos"
                    style="width: 70px"
                    v-if="item.type > 0"
                  >
                    <div class="charge-icon-row">
                      <div>
                        <i
                          ><svg
                            t="1623286511622"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="19299"
                            width="15"
                            height="15"
                          >
                            <path
                              d="M509.269333 10.453333c273.664 0 496.64 222.933333 496.64 496.597334s-222.976 496.597333-496.64 496.597333C235.648 1003.648 12.672 780.714667 12.672 507.050667S235.648 10.453333 509.312 10.453333z m55.04 192c-67.754667 0-101.589333 35.541333-101.589333 106.666667v239.957333h-10.24c-36.48 0-65.450667-13.013333-86.784-38.997333-21.333333-26.026667-32-60.672-32-104.149333 0-76.16 27.690667-141.013333 82.858667-194.432H341.632c-48.682667 49.92-72.96 114.474667-72.96 193.408 0 60.373333 16.64 109.226667 49.834667 146.346666 33.194667 37.12 78.08 55.466667 134.613333 54.741334 1.109333 1.194667 4.309333 1.194667 9.6 0v172.373333h58.368V605.866667c6.570667 1.194667 10.410667 1.194667 11.52 0 55.04 0.896 99.498667-17.237333 133.333333-54.698667 33.834667-37.333333 50.773333-84.906667 50.773334-142.506667 0-60.16-13.482667-109.482667-40.448-148.224-26.88-38.613333-64.213333-57.984-111.957334-57.984z m4.138667 64c26.624 0 47.317333 15.786667 62.08 47.488 14.762667 31.658667 22.186667 69.589333 22.186667 113.664 0 46.72-10.538667 84.864-31.573334 114.474667-21.077333 29.568-49.365333 44.373333-84.821333 44.373333h-11.648V320c0-35.626667 14.592-53.504 43.776-53.504z"
                              p-id="19300"
                              fill="#ffffff"
                            ></path></svg
                        ></i>
                      </div>
                      <div>
                        <i
                          ><svg
                            t="1649495045480"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2008"
                            width="20"
                            height="20"
                          >
                            <path
                              d="M512 1024c-283.136 0-512-228.928-512-512 0-283.136 228.864-512 512-512 283.072 0 512 228.864 512 512 0 283.072-228.928 512-512 512z m51.2-795.136H462.272L256 768h91.84l49.728-135.552h225.856L673.088 768H768L563.2 228.864z m-52.736 94.912h3.008l84.352 236.416H426.176l84.288-236.416z"
                              p-id="2009"
                              fill="#ffffff"
                            ></path></svg
                        ></i>
                      </div>
                      <div>
                        <i
                          ><svg
                            t="1623286914586"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="24162"
                            width="20"
                            height="20"
                          >
                            <path
                              d="M512 0A511.568842 511.568842 0 0 0 0 512C0 795.109053 228.890947 1024 512 1024S1024 795.109053 1024 512 795.109053 0 512 0z m54.218105 784.545684H457.781895L263.545263 239.454316h97.872842l150.581895 445.709473h3.018105l150.581895-445.709473h97.872842l-197.254737 545.091368z"
                              fill="#ffffff"
                              p-id="24163"
                            ></path></svg
                        ></i>
                      </div>

                      <div>
                        <i
                          ><svg
                            t="1646968112064"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="62849"
                            width="20"
                            height="20"
                          >
                            <path
                              d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                              p-id="62850"
                              fill="#ffffff"
                            ></path>
                            <path
                              d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                              p-id="62851"
                              fill="#ffffff"
                            ></path></svg
                        ></i>
                      </div>
                    </div>
                    <el-carousel
                      trigger="click"
                      indicator-position="none"
                      height="100px"
                      :interval="5000"
                      class="tab-inofs"
                    >
                      <el-carousel-item
                        :key="index"
                        v-for="(area, index) of item.deviceList2"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="area.channelName"
                          placement="top-start"
                        >
                          <div
                            class="text-name-ove"
                            style="padding-bottom: 5px"
                          >
                            {{ area.channelName }}
                          </div>
                        </el-tooltip>

                        <div class="charge-title">
                          <span class="charge-value"
                            >{{ area.sr ? area.sr : "-" }}%</span
                          >
                        </div>
                        <div class="charge-title">
                          <span class="charge-value"
                            >{{ area.si ? formatNumber(area.si / 1000)  : "-" }}A</span
                          >
                        </div>
                        <!-- :style="
                              Math.abs(item.voltage - 235) > 10
                                ? 'background:#f00'
                                : ''
                            " -->
                        <div class="charge-title">
                          <span class="charge-value"
                          :style="area.errorTypes.some(data=>data==1||data==2)?'background:#c42c2c':''"
                            >{{ area.sv ? area.sv : "-" }}V</span
                          >
                        </div>
                        <!-- :style="
                              Math.abs(item.temperature - 20) > 10
                                ? 'background:#f00'
                                : ''
                            " -->
                        <div class="charge-title">
                          <span class="charge-value"
                          :style="area.errorTypes.some(data=>data==3)?'background:#c42c2c':''"
                            >{{ area.st ? area.st : "-" }}℃
                          </span>
                        </div>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="statistics-row">
        <div class="ranking-row">
          <div class="ranktitle">
            <div
              class="ranktitle-type-row"
              :style="datetypeshow ? 'top:-1.76rem' : ''"
              :class="datetypeshow ? '' : 'bentdong'"
            >
              <div class="ranktitle-box" v-show="datetypeshow">
                <el-button
                  :type="listtype == 1 ? 'primary' : ''"
                  class="ranktitle-type-btn"
                  @click="changerBatteryListfun(1, $event)"
                  >实时</el-button
                >
                <el-button
                  :type="listtype == 2 ? 'primary' : ''"
                  class="ranktitle-type-btn"
                  @click="changerBatteryListfun(2, $event)"
                  >本周</el-button
                >
                <el-button
                  :type="listtype == 3 ? 'primary' : ''"
                  @click="changerBatteryListfun(3, $event)"
                  class="ranktitle-type-btn"
                  >本月</el-button
                >
                <el-button
                  :type="listtype == 4 ? 'primary' : ''"
                  @click="changerBatteryListfun(4, $event)"
                  class="ranktitle-type-btn"
                  >本年</el-button
                >
              </div>
              <div
                @click="datetypeshow = !datetypeshow"
                :style="datetypeshow ? 'border-radius:0' : ''"
                class="ranktitle-btn"
                title="日期范围选择"
                :class="
                  datetypeshow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
                "
              ></div>
            </div>
            <div
              @click="datetypeshow = !datetypeshow"
              class="ranktitle-day"
              :class="listtype != 1 ? 'noranktitleday' : ''"
            >
              <font
                v-if="listtype != 1"
                :style="listtype == 2 ? 'font-size:0.21rem' : ''"
                style="text-align: center"
                >{{ getranktitle() }}</font
              >

              <font v-if="listtype == 1" style="text-align: left">{{
                getFormatDate().slice(8, 10)
              }}</font>
              <font v-if="listtype == 1" style="text-align: right">{{
                getFormatDate().slice(5, 7)
              }}</font>
            </div>
            <div class="ranktitle-text">
              排名前<font style="white-space: nowrap">10%</font>
            </div>
          </div>
          <div class="ranking-box">
            <div class="ranking-title"><span>用电量(度)</span></div>

           
            <el-table
              :data="historyelectricityconsumptiondata"
              class="ranktable"
              :header-cell-class-name="headerRowStyle"
              height="1.4rem"
              style="width: 2.9rem"
            >
              <el-table-column
                prop="number"
                label="herad"
                align="center"
                width="90"
              >
                <template slot="header">
                  <span class="table-header">区域名称</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 1) }" -->
                  <div class="ranking-name" style="background: #049c04">
                    {{ scope.row.areaName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="sqv"
                label="herad"
                width="55"
                align="center"
              >
                <template slot="header">
                  <span class="table-header">累计</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ formatNumber(scope.row.sqv / 1000) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="maxSt"
                label="herad"
                width="65"
                align="center"
              >
                <template slot="header">
                  <span class="table-header">最高温</span>
                </template>
                <template slot-scope="scope">
                  <span
                    :style="scope.row.maxSt >= 65 ? 'color:#ffa5a5' : ''"
                    >{{ scope.row.maxSt?scope.row.maxSt + '℃':'--' }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="maxSp"
                label="herad"
                width="80"
                align="center"
              >
                <template slot="header">
                  <span class="table-header">最高功率</span>
                </template>
                <template slot-scope="scope">
                  <span
                    :style="scope.row.maxSp >= 500 ? 'color:#ffa5a5' : ''"
                    >{{ scope.row.maxSp?scope.row.maxSp + 'W':'--' }}</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="ranking-box">
            <div class="ranking-title">温度(℃)</div>
            <el-table
              :data="historytemperatureRankdata"
              class="ranktable"
              :header-cell-class-name="headerRowStyle"
              height="1.4rem"
              style="width: 2.65rem"
            >
              <el-table-column
                prop="number"
                label="herad"
                align="center"
                width="100"
              >
                <template slot="header">
                  <span class="table-header">区域名称</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 2) }" -->
                  <div class="ranking-name" style="background: #be0000">
                    {{ scope.row.areaName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="maxSt" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">最高</span>
                </template>
                <template slot-scope="scope">
                  <span
                    :style="scope.row.maxSt >= 65 ? 'color:#ffa5a5' : ''"
                    >{{ scope.row.maxSt }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="minSt" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">最低</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.minSt }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="avgSt" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">平均</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.avgSt }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="ranking-box">
            <div class="ranking-title">功率(W)</div>
            <el-table
              :data="historypowerrankdata"
              class="ranktable"
              :header-cell-class-name="headerRowStyle"
              height="1.4rem"
              style="width: 2.1rem"
            >
              <el-table-column
                prop="number"
                label="herad"
                align="center"
                width="100"
              >
                <template slot="header">
                  <span class="table-header">区域名称</span>
                </template>
                <template slot-scope="scope">
                  <!-- :style="{ background: colorcacl(scope.row, 4) }" -->
                  <div class="ranking-name" style="background: #67009a">
                    {{ scope.row.areaName }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="powerFactor" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">最高</span>
                </template>
                <template slot-scope="scope">
                  <span
                    :style="scope.row.powerFactor >= 500 ? 'color:#ffa5a5' : ''"
                    >{{ scope.row.maxSp }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="avgSp" label="herad" width="55">
                <template slot="header">
                  <span class="table-header">平均</span>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.avgSp }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="Totalinformation-row">
          <div class="Totalinformation-title" style="color: rgb(229, 147, 25)">
            用电量统计
          </div>
          <div class="qt-tongji">
            <div class="tab-btn">
              <el-radio-group v-model="sqvtype" size="mini" @change="gethiddendangerechaer()">
                <el-radio-button :key="item.value" v-for="item of getday" :label="item.value">{{item.label}}</el-radio-button>
              </el-radio-group>
            </div>
            <div id="barChart2" ref="barChart2" class="bar-chart"></div>
          </div>
          <div class="Totalinformation-mian">
            <div class="Totalinformation-box">
              <div class="Totalinformation-infos">
                <div class="Totalinformation-icon">
                  <img src="@/assets/images/icon_3.png" />
                  <span>区域总用电量(度)</span>
                </div>
                <div class="now">
                  当天
                  <span v-html="numbac(formatNumber(Sqvdata.daySqv / 1000))"> </span>
                </div>
                <div class="all">
                  <div class="Totalinformation-infos-row">
                    <div class="Totalinformation-infos-box">
                      <div>周</div>
                      <p>{{formatNumber(Sqvdata.weekSqv / 1000)}}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box">
                      <div>月</div>
                      <p>{{formatNumber(Sqvdata.monthSqv / 1000) }}</p>
                    </div>
                    <span></span>
                    <div class="Totalinformation-infos-box">
                      <div>年</div>
                      <p>{{formatNumber(Sqvdata.yearSqv / 1000)}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="state-statistics-row">
      <div>
        区域总数:<font @click="statetab=3" style="color: #fbff00; text-decoration: underline">{{
        statisticsdata.areaNum
        }}</font>
      </div>
      <div>
        有负载:<font @click="statetab=1" style="color: #fbff00; text-decoration: underline">{{
          statisticsdata.loadNum
        }}</font>
      </div>

      <div>
        无负载:<font @click="statetab=0" style="color: #fbff00; text-decoration: underline">{{
          statisticsdata.unloadNum
        }}</font>
      </div>
      <div>总设备量:<font style="color: #fbff00">{{statisticsdata.deviceNum}}</font></div>
      <div v-for="item of statisticsdata.targetCategoryData" :key="item.targetCategoryId">
         <div>{{item.targetCategoryName}}:<font style="color: #fbff00">{{item.openDeviceNum}}</font>/{{item.deviceNum}}</div>
      </div>
      <!-- <div>照明:<font style="color: #fbff00">13</font>/20</div>
      <div>空调:<font style="color: #fbff00">3</font>/10</div>
      <div>插座:<font style="color: #fbff00">23</font>/45</div>
      <div>饮水机:<font style="color: #fbff00">3</font>/5</div> -->

      <div>总功率:<font style="color: #fbff00">{{statisticsdata.powerTotal>1000? formatNumber(statisticsdata.powerTotal / 1000)+'K':statisticsdata.powerTotal}}W</font></div>
      <!-- <div>总用电量:<font style="color: #fbff00">{{ formatNumber(statisticsdata.sqvTotal / 1000)}}度</font></div> -->
    </div>
    <!-- 年月日弹窗 -->
    <div
      class="ChargingPointInformation-row"
      v-if="ChargingPointInformationshow"
    >
      <div class="ChargingPointInformation-box">
        <div class="ChargingPointInformation-nav">
          <div class="ChargingPointInformation-title">本周区域使用记录</div>
          <div>
            <el-button
              :type="Chargingpointtype == 1 ? 'primary' : ''"
              class="nav-btn"
              @click="Chargingpointinformation(1, $event)"
              >本周</el-button
            >
            <el-button
              :type="Chargingpointtype == 2 ? 'primary' : ''"
              class="nav-btn"
              @click="Chargingpointinformation(2, $event)"
              >本月</el-button
            >
            <el-button
              :type="Chargingpointtype == 3 ? 'primary' : ''"
              class="nav-btn"
              @click="Chargingpointinformation(3, $event)"
              >本年</el-button
            >
            <!-- <el-button type="primary" class="nav-btn">Excel导出</el-button> -->
            <el-button
              type="text"
              @click="ChargingPointInformationshow = false"
              class="el-icon-close close-btn"
            ></el-button>
          </div>
        </div>
        <div class="ChargingPointInformation-main">
          <el-table
            :data="ChargingPointInformationdata"
            max-height="300px"
            border
            style="width: 100%"
          >
            <el-table-column align="center" prop="probeId">
              <template slot="header">
                <div class="table-header">区域</div>
              </template>
              <template slot-scope="scope">
                <div class="table-data">
                  {{ batteryNameCode(scope.row.probeChannelName) + "号" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="chargeTimes">
              <template slot="header">
                <span class="table-header">服务次数</span>
              </template>
              <template slot-scope="scope">
                <div class="table-data">{{ scope.row.chargeTimes }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="chargeDuration">
              <template slot="header">
                <span class="table-header">服务时长</span>
              </template>
              <template slot-scope="scope">
                <div class="table-data">
                  {{ calctime(scope.row.chargeDuration) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="sqv">
              <template slot="header">
                <span class="table-header">累计充电量</span>
              </template>
              <template slot-scope="scope">
                <div class="table-data">
                  {{ scope.row.sqv / 1000 }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tl-corner"></div>
      <div class="tr-corner"></div>
      <div class="bl-corner"></div>
      <div class="br-corner"></div>
    </div>
    <!--  上移显示  -->
    <div
      class="ChargingPoint-info"
    v-if="ChargingPointinfoshow || ChargingPointinfocilckshow"
      :style="{ top: ChargingPointlocationy, left: ChargingPointlocationx }"
    >
    <div class="ChargingPoint-info-box" style="    border-bottom: 1px solid #fff;
    margin-bottom: 10px;justify-content: space-between;flex-direction: initial;align-items: center;">
     <div >
          <span>{{moveuptype==1?'总用电量(度)':'总功率(W)'}}</span><font>：{{ moveuptype==1?formatNumber(this.ChargingPointinfodata.areaSqv / 1000):this.ChargingPointinfodata.powerFactor }}</font>
        </div>
         <el-button
            type="text"
            @click="ChargingPointinfocilckshow = false"
            class="el-icon-close close-btn"
          ></el-button>
    </div>
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 2rem">
    <div class="ChargingPoint-info-box" >
        <div  style=" font-size:0.14rem" :style="{order: moveuptype==1?item.deviceSqv:item.sp}" :key="index" v-for="(item,index) of ChargingPointinfodata.deviceList.filter(data=>data.openState== '1' && data.probeMoldCode !=31)">
          <span>{{ item.channelName }}</span><font>：{{ moveuptype==1? item.deviceSqv?formatNumber(item.deviceSqv / 1000):'-':item.sp?item.sp:item.openState==1?0:'-'}}</font>
        </div>
       
       
      </div>
       </el-scrollbar>
      <!--   -->
      <!---->
      <!-- <div>
        <span>区域</span><font>：{{ ChargingPointinfodata.region }}</font>
      </div> -->
      <!-- <div class="ChargingPoint-info-box" v-for="item of ChargingPointinfodata">
        <div>
          <span>编号</span><font>：{{ .number }}</font>
        </div>
        
       
      </div> -->
     
    </div>
    <div class="Stationprod-info" v-if="Stationprodinfo">
      <div class="Stationprod-info-main">
        <div class="Stationprodtitle">
          0001号区域设备详细信息
          <el-button
            type="text"
            @click="Stationprodinfo = false"
            class="el-icon-close close-btn"
          ></el-button>
        </div>

        <div class="Stationprod-info-row">
          <div class="Stationprod-info-box">
            <div><span>名称</span><font>：电脑屏幕</font></div>
            <div>
              <i
                ><svg
                  t="1623286914586"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="24162"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0A511.568842 511.568842 0 0 0 0 512C0 795.109053 228.890947 1024 512 1024S1024 795.109053 1024 512 795.109053 0 512 0z m54.218105 784.545684H457.781895L263.545263 239.454316h97.872842l150.581895 445.709473h3.018105l150.581895-445.709473h97.872842l-197.254737 545.091368z"
                    fill="#ffffff"
                    p-id="24163"
                  ></path></svg
              ></i>
              <span>电压</span><font>：210V</font>
            </div>
            <div>
              <i
                ><svg
                  t="1648021859118"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2011"
                  width="20"
                  height="20"
                >
                  <path
                    d="M510.494118 323.764706l-84.329412 236.423529h171.670588l-84.329412-236.423529z"
                    fill="#ffffff"
                    p-id="2012"
                  ></path>
                  <path
                    d="M512 0C228.894118 0 0 228.894118 0 512s228.894118 512 512 512 512-228.894118 512-512S795.105882 0 512 0z m161.129412 768l-49.694118-135.529412h-225.882353l-49.694117 135.529412H256l206.305882-539.105882h100.894118L768 768h-94.870588z"
                    fill="#ffffff"
                    p-id="2013"
                  ></path></svg
              ></i>
              <span>电流</span><font>：25mA</font>
            </div>
            <div>
              <i
                ><svg
                  t="1646968112064"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="62849"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                    p-id="62850"
                    fill="#ffffff"
                  ></path>
                  <path
                    d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                    p-id="62851"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span>功率</span><font>：100W</font>
            </div>
            <div>
              <i
                ><svg
                  t="1623286511622"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="19299"
                  width="20"
                  height="20"
                >
                  <path
                    d="M509.269333 10.453333c273.664 0 496.64 222.933333 496.64 496.597334s-222.976 496.597333-496.64 496.597333C235.648 1003.648 12.672 780.714667 12.672 507.050667S235.648 10.453333 509.312 10.453333z m55.04 192c-67.754667 0-101.589333 35.541333-101.589333 106.666667v239.957333h-10.24c-36.48 0-65.450667-13.013333-86.784-38.997333-21.333333-26.026667-32-60.672-32-104.149333 0-76.16 27.690667-141.013333 82.858667-194.432H341.632c-48.682667 49.92-72.96 114.474667-72.96 193.408 0 60.373333 16.64 109.226667 49.834667 146.346666 33.194667 37.12 78.08 55.466667 134.613333 54.741334 1.109333 1.194667 4.309333 1.194667 9.6 0v172.373333h58.368V605.866667c6.570667 1.194667 10.410667 1.194667 11.52 0 55.04 0.896 99.498667-17.237333 133.333333-54.698667 33.834667-37.333333 50.773333-84.906667 50.773334-142.506667 0-60.16-13.482667-109.482667-40.448-148.224-26.88-38.613333-64.213333-57.984-111.957334-57.984z m4.138667 64c26.624 0 47.317333 15.786667 62.08 47.488 14.762667 31.658667 22.186667 69.589333 22.186667 113.664 0 46.72-10.538667 84.864-31.573334 114.474667-21.077333 29.568-49.365333 44.373333-84.821333 44.373333h-11.648V320c0-35.626667 14.592-53.504 43.776-53.504z"
                    p-id="19300"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span>功率因数</span><font>：32%</font>
            </div>

            <div>
              <i
                ><svg
                  t="1646968112064"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="62849"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                    p-id="62850"
                    fill="#ffffff"
                  ></path>
                  <path
                    d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                    p-id="62851"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span>温度</span><font>：26℃</font>
            </div>
            <div>阈值信息</div>
            <div><span>过压</span><font>：265V</font></div>
            <div><span>欠压</span><font>：185V</font></div>
            <div><span>过载</span><font>：2000W</font></div>
            <div><span>超温</span><font>：65℃</font></div>
          </div>
          <span></span>
          <div class="Stationprod-info-box">
            <div><span>名称</span><font>：电脑屏幕</font></div>
            <div>
              <i
                ><svg
                  t="1623286914586"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="24162"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0A511.568842 511.568842 0 0 0 0 512C0 795.109053 228.890947 1024 512 1024S1024 795.109053 1024 512 795.109053 0 512 0z m54.218105 784.545684H457.781895L263.545263 239.454316h97.872842l150.581895 445.709473h3.018105l150.581895-445.709473h97.872842l-197.254737 545.091368z"
                    fill="#ffffff"
                    p-id="24163"
                  ></path></svg
              ></i>
              <span>电压</span><font>：210V</font>
            </div>
            <div>
              <i
                ><svg
                  t="1648021859118"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2011"
                  width="20"
                  height="20"
                >
                  <path
                    d="M510.494118 323.764706l-84.329412 236.423529h171.670588l-84.329412-236.423529z"
                    fill="#ffffff"
                    p-id="2012"
                  ></path>
                  <path
                    d="M512 0C228.894118 0 0 228.894118 0 512s228.894118 512 512 512 512-228.894118 512-512S795.105882 0 512 0z m161.129412 768l-49.694118-135.529412h-225.882353l-49.694117 135.529412H256l206.305882-539.105882h100.894118L768 768h-94.870588z"
                    fill="#ffffff"
                    p-id="2013"
                  ></path></svg
              ></i>
              <span>电流</span><font>：25mA</font>
            </div>
            <div>
              <i
                ><svg
                  t="1646968112064"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="62849"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                    p-id="62850"
                    fill="#ffffff"
                  ></path>
                  <path
                    d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                    p-id="62851"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span>功率</span><font>：100W</font>
            </div>
            <div>
              <i
                ><svg
                  t="1623286511622"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="19299"
                  width="20"
                  height="20"
                >
                  <path
                    d="M509.269333 10.453333c273.664 0 496.64 222.933333 496.64 496.597334s-222.976 496.597333-496.64 496.597333C235.648 1003.648 12.672 780.714667 12.672 507.050667S235.648 10.453333 509.312 10.453333z m55.04 192c-67.754667 0-101.589333 35.541333-101.589333 106.666667v239.957333h-10.24c-36.48 0-65.450667-13.013333-86.784-38.997333-21.333333-26.026667-32-60.672-32-104.149333 0-76.16 27.690667-141.013333 82.858667-194.432H341.632c-48.682667 49.92-72.96 114.474667-72.96 193.408 0 60.373333 16.64 109.226667 49.834667 146.346666 33.194667 37.12 78.08 55.466667 134.613333 54.741334 1.109333 1.194667 4.309333 1.194667 9.6 0v172.373333h58.368V605.866667c6.570667 1.194667 10.410667 1.194667 11.52 0 55.04 0.896 99.498667-17.237333 133.333333-54.698667 33.834667-37.333333 50.773333-84.906667 50.773334-142.506667 0-60.16-13.482667-109.482667-40.448-148.224-26.88-38.613333-64.213333-57.984-111.957334-57.984z m4.138667 64c26.624 0 47.317333 15.786667 62.08 47.488 14.762667 31.658667 22.186667 69.589333 22.186667 113.664 0 46.72-10.538667 84.864-31.573334 114.474667-21.077333 29.568-49.365333 44.373333-84.821333 44.373333h-11.648V320c0-35.626667 14.592-53.504 43.776-53.504z"
                    p-id="19300"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span>功率因数</span><font>：32%</font>
            </div>

            <div>
              <i
                ><svg
                  t="1646968112064"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="62849"
                  width="20"
                  height="20"
                >
                  <path
                    d="M512 0c-282.757922 0-511.978511 229.229798-511.978511 512s229.220588 512 511.978511 512 511.978511-229.229798 511.978511-512S794.757922 0 512 0zM661.247162 843.712891c-41.195238 41.195238-95.967702 63.881936-154.225547 63.881936s-113.029286-22.686698-154.224524-63.881936c-41.194214-41.195238-63.881936-95.967702-63.881936-154.225547 0-60.432371 24.772196-117.485785 68.432579-158.644183L357.347734 236.839103c0-33.248242 17.084097-65.252143 46.873564-87.803765 27.79402-21.041222 64.302515-32.630165 102.800317-32.630165 38.496779 0 75.004251 11.588943 102.799294 32.630165 29.78742 22.551622 46.873564 54.555523 46.873564 87.803765l0 294.003034c43.661406 41.158399 68.434625 98.212836 68.434625 158.645207C725.129098 747.745189 702.4424 802.517653 661.247162 843.712891zM720.633714 489.822908l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 483.352543 728.614479 489.822908 720.633714 489.822908zM720.633714 445.468724l-35.183314 0c-7.978718 0-14.449084-6.470365-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 438.998359 728.614479 445.468724 720.633714 445.468724zM720.633714 401.113517l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107s6.470365-14.450107 14.449084-14.450107l35.183314 0c7.980765 0 14.450107 6.468318 14.450107 14.450107C735.083821 394.644175 728.614479 401.113517 720.633714 401.113517zM720.633714 356.757287l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 350.287945 728.614479 356.757287 720.633714 356.757287zM720.633714 312.403103l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.449084 0-7.981788 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.469342 14.450107 14.45113C735.083821 305.933761 728.614479 312.403103 720.633714 312.403103zM720.633714 268.047896l-35.183314 0c-7.978718 0-14.449084-6.469342-14.449084-14.450107 0-7.980765 6.470365-14.45113 14.449084-14.45113l35.183314 0c7.980765 0 14.450107 6.470365 14.450107 14.45113C735.083821 261.57753 728.614479 268.047896 720.633714 268.047896z"
                    p-id="62850"
                    fill="#ffffff"
                  ></path>
                  <path
                    d="M608.66969 566.616922l-10.616802-8.79327L598.052888 236.839103c0-33.495882-41.687448-61.793368-91.031273-61.793368-49.345871 0-91.033319 28.29851-91.033319 61.793368l0 320.985572-10.615779 8.794293c-36.743856 30.436196-57.8168 75.221192-57.8168 122.869399 0 87.929632 71.536266 159.465898 159.465898 159.465898 87.930655 0 159.465898-71.536266 159.466921-159.466921C666.488537 641.839137 645.414569 597.056188 608.66969 566.616922zM507.022639 800.76166c-61.454654 0-111.273293-49.818639-111.273293-111.273293 0-45.445028 27.245528-84.519975 66.289776-101.797477L462.039121 317.557496c0-18.808368 20.139689-34.053584 44.982494-34.053584 24.841781 0 44.981471 15.245216 44.981471 34.053584l0 270.13237c39.045271 17.278525 66.291822 56.352449 66.291822 101.798501C618.294908 750.943021 568.477292 800.76166 507.022639 800.76166z"
                    p-id="62851"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              <span>温度</span><font>：26℃</font>
            </div>
            <div>阈值信息</div>
            <div><span>过压</span><font>：265V</font></div>
            <div><span>欠压</span><font>：185V</font></div>
            <div><span>过载</span><font>：2000W</font></div>
            <div><span>超温</span><font>：65℃</font></div>
          </div>
        </div>
      </div>
    </div>
    <!--详细信息弹窗-->
    <div class="Charging-Details-fox" v-if="ChargingDetailsrowshow">
      <div class="Charging-Details-row">
        <div class="Charging-Details-box">
          <div class="Charging-Details-nav">
            <div class="Charging-Details-title">
              <!-- <i  v-if="ChargingDetailsworkstatedata.state > 0"  title="关闭工位">
                <svg t="1647398395349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25915" width="27" height="27"><path d="M512 1024C229.6832 1024 0 810.9056 0 548.9664 0 347.8528 137.3184 167.7312 341.8112 100.864c16.7936-5.5296 34.9184 3.2768 40.5504 19.456 5.632 16.2816-3.3792 33.8944-20.0704 39.3216-178.4832 58.368-298.2912 214.8352-298.2912 389.3248 0 227.7376 201.0112 412.9792 448 412.9792s448-185.2416 448-412.9792c0-174.592-119.808-330.9568-298.1888-389.3248-16.7936-5.4272-25.7024-23.04-20.0704-39.3216 5.632-16.2816 23.7568-24.9856 40.5504-19.456C886.6816 167.7312 1024 347.8528 1024 548.9664 1024 810.9056 794.3168 1024 512 1024z" p-id="25916" fill="#ffffff"></path><path d="M512 558.592c-17.7152 0-32.0512-13.9264-32.0512-31.0272V31.0272C480.0512 13.9264 494.2848 0 512 0s32.0512 13.9264 32.0512 31.0272v496.4352c0 17.2032-14.336 31.1296-32.0512 31.1296z" p-id="25917" fill="#ffffff"></path></svg>
              </i> -->
              <span style="color: #e59319; font-weight: bold">
                {{
                  chargingDetailstype == 2
                    ? ChargingDetailsworkstatedata.batteryResult.userName +
                      "使用记录"
                    : poptitle + "号区域记录"
                }}
              </span>
            </div>
            <div>
              <div
                style="display: inline-block"
                v-show="chargingDetailstype != 1"
              >
                <el-radio
                  style="margin-left: 0.3rem"
                  v-model="usertype"
                  class="nav-radio"
                  :label="1"
                  >默认</el-radio
                >
                <el-radio v-model="usertype" class="nav-radio" :label="2"
                  >日</el-radio
                >
                <el-radio v-model="usertype" class="nav-radio" :label="3"
                  >周</el-radio
                >
                <el-radio v-model="usertype" class="nav-radio" :label="4"
                  >月</el-radio
                >
                <el-radio v-model="usertype" class="nav-radio" :label="5"
                  >年</el-radio
                >
                <el-radio v-model="usertype" class="nav-radio" :label="6"
                  >总计</el-radio
                >
              </div>
              <el-button
                type="text"
                @click="ChargingDetailsrowshow = false"
                class="el-icon-close close-btn"
              ></el-button>
            </div>
          </div>
          <div class="Charging-Details-tab-row">
            <div
              class="Charging-Details-btn"
              @click="chargingDetailstype_change(1)"
              :class="chargingDetailstype == 1 ? 'Charging-Details-on' : ''"
            >
              <i><img src="@/assets/images/icon-6.png" /></i
              ><span>充电信息</span>
            </div>

            <div
              v-if="ChargingDetailsworkstatedata.state > 0"
              class="Charging-Details-btn"
              @click="chargingDetailstype_change(2)"
              :class="chargingDetailstype == 2 ? 'Charging-Details-on' : ''"
            >
              <i><img src="@/assets/images/icon-5.png" /></i
              ><span>使用者历史</span>
            </div>
            <div
              class="Charging-Details-btn"
              @click="chargingDetailstype_change(3)"
              :class="chargingDetailstype == 3 ? 'Charging-Details-on' : ''"
            >
              <i><img src="@/assets/images/icon-7.png" /></i
              ><span>区域历史</span>
            </div>
          </div>
          <!--充电信息-->
          <div class="Charging-Details-infos" v-show="chargingDetailstype == 1">
            <div>
              <div class="Charging-Details-workstate">
                <div
                  v-show="ChargingDetailsworkstatedata.state > 0"
                  v-if="ChargingPointinfodata.batteryResult"
                >
                  <span>使用人：</span
                  ><font>{{
                    ChargingDetailsworkstatedata.batteryResult.userName
                  }}</font>
                </div>
                <div
                  v-show="ChargingDetailsworkstatedata.state > 0"
                  v-if="ChargingPointinfodata.batteryResult"
                >
                  <span>开始时间：</span
                  ><font>{{
                    getFormatDate(
                      ChargingDetailsworkstatedata.batteryResult.time
                    )
                  }}</font>
                </div>
                <div v-show="ChargingDetailsworkstatedata.state > 0">
                  <span>充电量：</span
                  ><font
                    >{{
                      (ChargingDetailsworkstatedata.kWh / 1000).toFixed(2)
                    }}度</font
                  >
                </div>
                <div>
                  <span>当前功率：</span
                  ><font>{{ ChargingDetailsworkstatedata.powerFactor }}W</font>
                </div>
                <div v-if="ChargingPointinfodata.batteryResult">
                  <span>当前温度：</span
                  ><font>{{ ChargingDetailsworkstatedata.temperature }}℃</font>
                </div>
                <div v-show="ChargingDetailsworkstatedata.state > 0">
                  <span>充电时长：</span
                  ><font>{{
                    calctime(ChargingDetailsworkstatedata.Usagetime)
                  }}</font>
                </div>
              </div>
              <div class="Charging-Details-line" id="workstateLine"></div>
            </div>
            <div class="allcdi-row">
              <div class="allcdi-box">
                <div class="allcdi-title">温度(℃)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.maxSt == 255
                          ? "56"
                          : ChargingDetailsworkstatetotldata.maxSt
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.minSt
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.avgSt
                        : "-"
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="allcdi-box">
                <div class="allcdi-title">功率(W)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.maxSp
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.minSp
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.avgSp
                        : "-"
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="allcdi-box">
                <div class="allcdi-title">电压(V)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.maxSv
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.minSv
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? ChargingDetailsworkstatetotldata.avgSv
                        : "-"
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="allcdi-box">
                <div class="allcdi-title">电流(A)</div>
                <div class="allcdi-main">
                  <div>
                    <p>最高</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? (
                            ChargingDetailsworkstatetotldata.maxSi / 1000
                          ).toFixed(2)
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>最低</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? (
                            ChargingDetailsworkstatetotldata.minSi / 1000
                          ).toFixed(2)
                        : "-"
                    }}</span>
                  </div>
                  <div>
                    <p>平均</p>
                    <span>{{
                      ChargingDetailsworkstatetotldata
                        ? (
                            ChargingDetailsworkstatetotldata.avgSi / 1000
                          ).toFixed(2)
                        : "-"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--使用者历史-->
          <div
            class="Charging-Details-user"
            v-show="chargingDetailstype == 2"
            style="margin-top: 20px"
          >
            <div>
              <el-table
                :data="ChargingUserGendata"
                max-height="300px"
                :header-cell-class-name="headerRowStyle"
                border
                style="width: 1045px"
                ><el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">充电情况概括</div>
                  </template>
                  <el-table-column align="center" prop="type" width="100">
                    <template slot="header" slot-scope="scope">
                      <div class="table-header">{{ daytitle }}</div>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                          usertype != 1
                            ? ChargingDetailsHistorytitle(scope.row)
                            : scope.row.type
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="usagecount" width="100">
                    <template slot="header">
                      <span class="table-header">累计充电</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.chargeTimes }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumcharge" width="120">
                    <template slot="header">
                      <span class="table-header">合计用电(度)</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumtime" width="120">
                    <template slot="header">
                      <span class="table-header">使用时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.chargeDuration) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSt }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSt }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSp }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="65"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSv }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="操作"
                    prop="type"
                    width="80"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="small"
                        @click="getBatteryLogByTimeAndUserIdfun(scope.row)"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px" v-if="ChargingUserGenvidedatashow">
              <el-table
                :data="ChargingUserGenvidedata"
                max-height="300px"
                :header-cell-class-name="headerRowStyle"
                border
                style="width: 1045px"
              >
                <el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">用户使用情况记录</div>
                  </template>
                  <el-table-column align="center" type="index" width="50">
                  </el-table-column>
                  <el-table-column align="center">
                    <template slot="header">
                      <span class="table-header">区域</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                          scope.row.probeChannelName != null
                            ? batteryNameCode(scope.row.probeChannelName) + "号"
                            : "-"
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="200">
                    <template slot="header">
                      <span class="table-header">开始时间</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                          scope.row.startTime != null
                            ? scope.row.startTime.slice(0, 16)
                            : "-"
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot="header">
                      <span class="table-header">充电时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.time) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center">
                    <template slot="header">
                      <span class="table-header">充电量</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSt }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSt }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSv }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSv }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSp }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSp }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!--工位历史-->
          <div
            class="Charging-Details-history"
            v-show="chargingDetailstype == 3"
            style="margin-top: 20px"
          >
            <div>
              <el-table
                :data="Charginghistorydata"
                max-height="300px"
                :header-cell-class-name="headerRowStyle"
                border
                style="width: 1070px"
                ><el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">区域使用概括</div>
                  </template>
                  <el-table-column align="center" prop="type" width="100">
                    <template slot="header" slot-scope="scope">
                      <div class="table-header">{{ daytitle }}</div>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                          usertype != 1
                            ? ChargingDetailsHistorytitle(scope.row)
                            : scope.row.type
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="usagecount" width="100">
                    <template slot="header">
                      <span class="table-header">累计服务</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.chargeTimes }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumcharge" width="120">
                    <template slot="header">
                      <span class="table-header">合计耗电(度)</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sumtime" width="120">
                    <template slot="header">
                      <span class="table-header">累计时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.chargeDuration) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSt }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSt }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSp }}
                        </div>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSp }}
                        </div>
                      </template>
                    </el-table-column> -->
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.avgSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.maxSv }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ scope.row.minSv }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电流(A)</span>
                    </template>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ (scope.row.avgSi / 1000).toFixed(1) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ (scope.row.maxSi / 1000).toFixed(1) }}
                        </div>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column
                      align="center"
                      label="heradleve2"
                      width="55"
                    >
                      <template slot="header">
                        <span class="table-header">最小</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">
                          {{ (scope.row.minSi / 1000).toFixed(1)}}
                        </div>
                      </template>
                    </el-table-column> -->
                  </el-table-column>
                  <el-table-column align="center" label="操作" prop="type">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="small"
                        @click="getBatteryLogByTimeAndUserIdfun(scope.row)"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px" v-if="Charginghistorydatashow">
              <el-table
                :data="ChargingUserGenvidedata"
                max-height="300px"
                :header-cell-class-name="headerRowStyle"
                border
                style="width: 1070px"
              >
                <el-table-column align="center">
                  <template slot="header">
                    <div class="table-header">区域使用情况记录</div>
                  </template>
                  <el-table-column align="center" type="index" width="50">
                  </el-table-column>
                  <el-table-column align="center" width="150">
                    <template slot="header">
                      <span class="table-header">充电人</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.userName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="200">
                    <template slot="header">
                      <span class="table-header">开始时间</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{
                          scope.row.startTime != null
                            ? scope.row.startTime.slice(0, 16)
                            : "-"
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="100">
                    <template slot="header">
                      <span class="table-header">充电时长</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">
                        {{ calctime(scope.row.time) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center">
                    <template slot="header">
                      <span class="table-header">充电量</span>
                    </template>
                    <template slot-scope="scope">
                      <div class="table-data">{{ scope.row.sqv / 1000 }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">温度(℃)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSt }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSt }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">电压(V)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSv }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSv }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="herad">
                    <template slot="header">
                      <span class="table-header">功率(W)</span>
                    </template>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">最高</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.maxSp }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="heradleve2">
                      <template slot="header">
                        <span class="table-header">平均</span>
                      </template>
                      <template slot-scope="scope">
                        <div class="table-data">{{ scope.row.avgSp }}</div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="tl-corner"></div>
        <div class="tr-corner"></div>
        <div class="bl-corner"></div>
        <div class="br-corner"></div>
      </div>
    </div>
  </div>
</template>
<script src="./Station.js"></script>
<style lang="stylus" src="./Station.styl" scoped></style>
<style>
.el-message-box {
  border: solid 0.01rem #3696c2;
  -webkit-box-shadow: 0 0 20px 0px inset rgba(68, 199, 244, 0.3);
  box-shadow: 0 0 20px 0px inset rgba(68, 199, 244, 0.3);
  background-color: #1c2961;
  z-index: 4;
  border-radius: 3px;
  color: #fff;
  padding: 0.05rem 0.15rem 0.15rem;
}
.el-message-box__title {
  color: #fff;
}
.el-message-box__headerbtn .el-message-box__close {
  color: #fff;
  font-size: 22px;
}
.el-message-box__header {
  border-bottom: 1px solid #fff;
}
.el-message-box__content {
  color: #fff;
}
</style>